<template>
  <div class="Head grid">
    <div class="grid-cell-1"></div>
    <div class="HeadConnet grid-cell-6">
      <div class="HeadLeft">
        <div class="HeadOneLeft">
          <a href=""><img title="Logo" src="../Images/Logn.jpg" /></a>
        </div>
        <div class="HeadTwoLeft">
          <a href=""><span class="HeadText">首页</span></a>
        </div>
        <div class="HeadThreeLeft">
          <a href=""><span class="HeadText">分类</span></a>
        </div>
        <div class="HeadFourLeft">
          <a href=""><span class="HeadText">排行</span></a>
        </div>
      </div>
      <div class="grid-cell-1"></div>
      <div class="grid-cell-1"></div>
      <div class="HeadRight">
        <div class="HeadZeroRight">
          <input type="text" class="HeadSearchBox" placeholder="看漫画点这里"/><input
            title="搜索"
            type="button"
            value="🔍"
            class="HeadSearchBtn"
          />
        </div>
        <div @mouseenter="EnterZ" @mouseout="OutZ" class="HeadOneRight">
          <li class="HeadOneRightHis">
            <a href=""> <span class="HeadText">历史</span></a>
            <ul v-show="isTureZero">
              <li v-for="HisList in HisLists" :key="HisList.ComicName" class="HeadOneRightLi">
                <div class="HeadComic">
                  <!--<img class="ComicImg" src="../Image/ComicBigImg/OnePunchMan.jpg">-->
                  <img :src="HisList.img" class="ComicImg">
                </div>
                <div class="HeadComicCn">
                  <p>{{HisList.ComicName}}</p>
                  <span>{{HisList.NewChapter}}</span>
                  <a href="">{{HisList.ReadNow}}</a>
                </div>
              </li>
              <li class="HeadOneRightLiMore"><a href="">更多内容></a></li>
            </ul>
          </li>
        </div>
        <div @mouseenter="Enter" @mouseout="Out" class="HeadTwoRight">
          <li class="HeadTwoRightBo">
            <a href=""> <span class="HeadText">书架</span></a>
            <ul v-show="isTure">
              <li
                v-for="List in Lists"
                :key="List.ComicName"
                class="HeadTwoRightLi">
                <div class="HeadComic">
                  <!--<img class="ComicImg" src="../Image/ComicBigImg/OnePunchMan.jpg">-->
                  <img :src="List.img" class="ComicImg">
                </div>
                <diV class="HeadComicCn">
                  <p>{{ List.ComicName }}</p>
                  <span>{{ List.NewChapter }}</span>
                  <a href="">{{ List.ReadNow }}</a>
                </diV>
              </li>
              <li class="HeadTwoRightMore">
                <a href="">更多内容></a>
              </li>
            </ul>
          </li>
        </div>
        <div @mouseenter="EnterS" @mouseout="OutS" class="HeadThreeRight">
          <li  class="HeadThreeRightImg">
            <div class="HeadUser">
              <a href="">
                <span><img class="UserImg" src="../Images/HeadImage.jpg" /></span
              ></a>
            </div>
            <ul v-show="isTureSed" v-for="UserList in UserLists" :key="UserList.UserName">
              <li class="HeadThreeRightLi"><p>{{UserList.UserName}}</p></li>
              <li class="HeadThreeRightLi"><a href="">{{UserList.MyCoin}}</a></li>
              <li class="HeadThreeRightLi"><a href="">{{UserList.MyReadTicket}}</a></li>
              <li class="HeadThreeRightLiExit"><a href="">退出登录</a></li>
            </ul>
          </li>
        </div>
      </div>
    </div>
    <div class="grid-cell-1"></div>
  </div>
</template>

<script>
export default {
    name : "Head", 
      data() {
    return {
      isTureZero:false,
      isTure: false,
      isTureSed:false,
      HisLists:[
      {
          img: require("../Images/ComicBigImg/OnePunchMan.jpg"),
          ComicName: "一拳超人",
          NewChapter: "193话",
          ReadNow: "看到第192话",
      },
      {
          img: require("../Images/ComicBigImg/Death.jpg"),
          ComicName: "死神",
          NewChapter: "983话",
          ReadNow: "看到第100话",
      },
      {
          img: require("../Images/ComicBigImg/Blades.jpg"),
          ComicName: "镖人",
          NewChapter: "200话",
          ReadNow: "看到第137话",
      }
      ],
      Lists: [
        {
          img: require("../Images/ComicBigImg/OnePunchMan.jpg"),
          ComicName: "一拳超人",
          NewChapter: "193话",
          ReadNow: "看到第192话",
        },
        {
          img: require("../Images/ComicBigImg/Naruto.jpg"),
          ComicName: "火影忍者",
          NewChapter: "983话",
          ReadNow: "看到第100话",
        },
        {
          img: require("../Images/ComicBigImg/OnePiece.jpg"),
          ComicName: "海贼王",
          NewChapter: "1034话",
          ReadNow: "看到第543话",
        },
      ],
      UserLists:[{
          UserName:"樊醒",
          MyCoin:"我的漫币",
          MyReadTicket:"我的阅读券"
      }]
    };
  },
  // 悬停
  methods: {
    EnterZ(){
      this.isTureZero = true;
    },
    OutZ(){
      this.isTureZero = false;
    },
    Enter() {
      this.isTure = true;
    },
    Out() {
      this.isTure = false;
    },
    EnterS(){
      this.isTureSed = true;
    },
    OutS(){
      this.isTureSed = false;
    },
  },
}
</script>



<style>
  * {
  margin: 0px;
  padding: 0px;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}
ul {
  list-style: none;
}
.HeadConnet {
  position: relative;
}
/* 头部样式 */
.Head {
  width: 100%;
  height: 55px;
  background-color: rgb(236, 243, 243);
  position: fixed;
  /* border: 1px solid red;  */
  z-index: 99;
}
/* 搜索框样式 */
.HeadSearchBox {
  height: 25px;
  width: 240px;
  margin-top: 23px;
  border: 0px;
  z-index: 99;
}
/* 搜索按钮样式 */
.HeadSearchBtn {
  height: 25px;
  width: 30px;
  border: 0px;
  margin-top: 23px;
  cursor: pointer;
  background-color: white;
}
/* 左部div样式 */
.HeadLeft {
  padding-top: 29px;
  width: 300px;
  /* position: absolute;
    left: 15%; */
  /* border: 1px solid red;  */
  z-index: 1;
}

/* 左部文字样式 */
.HeadLeft a {
  margin-left: 30px;
  text-decoration: none;
  font-size: 15px;
  color: rgb(29, 52, 53);
}
/* 右部div样式 */
.HeadRight {
  margin-top: 30px;
  height: 55px;
  width: 580px;
  position: absolute;
  right: -80px;
  bottom: 0px;
  /* border: 1px solid red;  */
  background-color: rgb(236, 243, 243);
}
.HeadOneRight a {
  margin-left: 22px;
  text-decoration: none;
  font-size: 15px;
  color: rgb(29, 52, 53);
  /* position: absolute;
    left: 20px; */
}
/* 右部文字样式 */
.HeadRight a {
  margin-left: 2px;
  text-decoration: none;
  font-size: 15px;
  color: rgb(29, 52, 53);
}

/* 右部文字鼠标悬浮样式 */
.HeadRight a:hover {
  color: rgba(45, 149, 218, 0.904);
}
/* 左部文字鼠标悬浮样式 */
.HeadLeft a:hover {
  color: rgba(49, 148, 218, 0.904);
}
/* 左部Logo */
.HeadLeft img {
  height: 40px;
  border-radius: 20%;
  margin-top: -29px;
}

.HeadUser {
  height: 40px;
  display: block;
  z-index: 99;
}
/* 右部头像 */
.UserImg {
  height: 40px;
  border-radius: 50%;
  margin-top: 0px;
  z-index: 99;
  margin-left: -5px;
  /* border:  red 1px solid;  */
}

/* 右部文字div样式(历史) */
.HeadOneRight {
  margin-top: 29px;
  display: block;
  width: 70px;
  text-align: center;
  margin-left: 270px;
  position: absolute;
  /* border: red 1px solid;  */
}
/* 右部文字div样式(书架) */
.HeadTwoRight {
  margin-top: 29px;
  display: block;
  width: 70px;
  text-align: center;
  margin-left: 335px;
  position: absolute;
  /* border: red 1px solid;  */
}
/* 右部头像div样式 */
.HeadThreeRight {
  margin-top: 5px;
  width: 50px;
  height: 55px;
  display: block;
  margin-left: 415px;
  position: absolute;
  /* border:  red 1px solid;  */
}

/* 左部内容浮动 */
.HeadOneLeft,
.HeadTwoLeft,
.HeadThreeLeft,
.HeadFourLeft {
  float: left;
}
/* 右部内容浮动 */
.HeadOneRight,
.HeadTwoRight,
.HeadThreeRight,
.HeadSearchBox,
.HeadSearchBtn {
  float: left;
}
/* 右部div定位 */
.HeadZeroRight {
  margin-left: 0px;
  position: absolute;
}


/* ----------------------------------------------------- */

/* 右部ul li 设置 */
/* 历史 */
.HeadOneRight ul {
  float: left;
  /* display: none; */
  position: relative;
  right: 50px;
  text-align: center;
  /* border: 1px solid red;  */
  /* background-color: red; */
  margin-left: -10px;
}
/* 书架 */
.HeadTwoRight ul {
  float: left;
  /* display: none; */
  position: relative;
  right: 50px;
  text-align: center;
  /* border: 1px solid red; */
  background-color: rgba(236, 243, 243, 0.76) (194, 67, 67);
  margin-left: -10px;
}
/* 用户 */
.HeadThreeRight ul {
  float: left;
  /* display: none; */
  margin-right: 0px;
  position: relative;
  right: 50px;
  text-align: center;
  /* border: 1px solid red; */
  background-color: rgba(236, 243, 243, 0.76) (194, 67, 67);
  margin-left: -10px;
  z-index: -1;
}

.HeadOneRightLi {
  display: block;
  width: 240px;
  height: 120px;
  /* border: 1px solid red;  */
  background-color: rgb(236, 243, 243);
}

/* 头部浮动菜单漫画div样式 */
.HeadComic {
  margin-top: 10px;
  float: left;
  height: 90px;
  width: 90px;
  /* border: red 1px solid;  */
}
/* 头部浮动菜单文字div样式 */
.HeadComicCn {
  margin-top: 10px;
  float: left;
  width: 100px;
  height: 90px;
  /* border: red 1px solid;  */
}
/* 漫画图片 */
.ComicImg {
  height: 100px;
  border-radius: 5%;
  margin-top: 0px;
  position: relative;
  left: 0px;
  /* border:  red 1px solid;  */
}

.HeadComicCn p {
  font-size: 16px;
  font-weight: 600;
}
.HeadComicCn span {
  font-size: 8px;
  font-weight: 400;
  margin-left: 3px;
  margin-top: 10px;
  color: gray;
  /* border: rgb(46, 43, 224) 1px solid; */
}
.HeadComicCn a {
  font-size: 8px;
  font-weight: 500;
  display: block;
  width: 100%;
  margin-top: 30px;
  /* border: rgb(196, 207, 41) 1px solid; */
}

.HeadOneRightLiMore {
  display: block;
  width: 240px;
  height: 40px;
  border-radius: 0px 0px 15px 15px;
  /* border: 1px solid red;  */
  background-color: rgb(216, 219, 219);
}
.HeadOneRightLiMore a {
  position: relative;
  top: 10px;
}
.HeadTwoRightLi {
  display: block;
  width: 240px;
  height: 120px;
  /* border: 1px solid red;  */
  background-color: rgb(236, 243, 243);
}

.HeadTwoRightMore {
  display: block;
  width: 240px;
  height: 40px;
  border-radius: 0px 0px 15px 15px;
  /* border: 1px solid red;  */
  background-color: rgb(216, 219, 219);
}
.HeadTwoRightMore a {
  position: relative;
  top: 10px;
}
.HeadThreeRightLi {
  display: block;
  width: 160px;
  height: 80px;
  /* border: 1px solid red;  */
  background-color: rgb(236, 243, 243);
  z-index: -1;
}
.HeadThreeRightLi p {
  padding-top: 20px;
}
.HeadThreeRightLiExit {
  display: block;
  width: 160px;
  height: 40px;
  border-radius: 0px 0px 15px 15px;
  /* border: 1px solid red;  */
  background-color: rgb(216, 219, 219);
}
.HeadThreeRightLiExit a {
  position: relative;
  top: 8px;
}
/* ---------------------------------------------- */
.HeadOneRight a {
  display: block;
}
.HeadTwoRight a {
  display: block;
}
.HeadThreeRight {
  display: block;
}

/* -------------------------------------------- */
/* 弹性布局 */
.grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
}

.grid-cell-1 {
  flex-grow: 1;
}
.grid-cell-2 {
  flex-grow: 2;
}
.grid-cell-3 {
  flex-grow: 3;
}
.grid-cell-4 {
  flex-grow: 4;
}
.grid-cell-5 {
  flex-grow: 5;
}
.grid-cell-6 {
  flex-grow: 6;
}
</style>